<template>
	<view class="packageDetail">
		<SwitchPatient :id="Data.optionid" :fun="changeuser"></SwitchPatient>
		<view class="title">选择预约时间</view>
		<view class="box">
			<view class="week-day" v-for="(v, i) in dateList.dateName" :key="v">
				<text>{{ i + 1 }}</text>
				<view @click="changeDate(v)" :data-set="v" class="data" :class="date == v ? 'active' : ''">{{ v.substring(8) }}</view>
			</view>
		</view>
		<view class="title">套餐详情</view>
		<view class="list" v-for="v in Data.list2" :key="v.id">
			<text class="left">{{ v.name }}</text>
			<text class="right">¥{{ v.price }}</text>
		</view>
		<view style="padding-bottom: 80px;">
			<uni-card :is-shadow="false">
				<text class="uni-body">
					<text>预约须知：</text>
					<text>1.套餐内的项目为固定项目，不可增减。</text>
					<text>2.您可以选择一周内的号源，每周三早10点开放下一周号源。</text>
					<text>3、体检当日至我院至门诊楼三楼领取排队号。</text>
					<text>4、预约成功后如须退款，请于我院退费窗口办理。</text>
				</text>
			</uni-card>
		</view>
		<view class="end">
			<view class="end-left">
				<text style="font-size: 24rpx;">合计：</text>
				<text style="color: #F46363;font-size: 32rpx;">{{ mdata }}</text>
			</view>

			<view class="end-right" @click="go">{{ Data.operation }}</view>
		</view>
	</view>
</template>

<script setup>
import SwitchPatient from '@/components/SwitchPatient.vue';
import { ProjectDetails } from '@/api/ExaminationService.js';
import { weekDay } from '@/api/AppointmentRegisterAPI.js';
import { reactive, computed, onMounted, toRefs, ref } from 'vue';
import { medicalStore, examinationDataStore } from '@/store/medicalStore.js';
import { onLoad } from '@dcloudio/uni-app';
let date = ref('');
let dateList = reactive({
	dateName: []
});
const store = medicalStore();
const DataStore = examinationDataStore();
let Data = reactive({
	sel: 0,
	sum: 0,
	operation: '下一步',
	list2: [],
	list3:"",
	id: '',
	optionid: 0,
	user:{}
});

const changeuser = v => {
	Data.id = v.id;
	Data.user=v
	console.log("测试",v)
};
let mdata = computed(() => {
	let sum = 0;
	for (const Data2 of Data.list2) {
		sum += Data2.price;
		// console.log(sum);
	}
	return sum;
});
// let active = i => {
// 	Data.sel = i;
// 	console.log(i);
// };
let changeDate = v => {
	date.value = v;
	console.log(date.value);
};
let popupCoupon = ref(null);
let toggle = (name, v) => {
	const doctor = selPersonStore();
	doctor.selDoctorData = v;
	doctorNames.value = name;
	popupCoupon.value.open('bottom');
};
const go = id => {
	console.log(Data.user)
	DataStore.set(v => {
		v.date = date.value;
		v.sum = mdata;
		v.userid = Data.id;
		v.user=Data.user
	});
	uni.navigateTo({
		url: `/pages/examinationService/confirmExam/confirmExam`
	});
};
// 获取星期
weekDay()
	.then(({ data }) => {
		if (data.msg == 'success') {
			dateList.dateName = data.data.weekDays;
			date.value = data.data.today;
		}
	})
	.catch(err => {
		console.log(err);
	});

const ProjectDetailsFn = id => {
	ProjectDetails({ id })
		.then(({ data }) => {
			Data.list2 = data.data;
			console.log(Data.list2);
		})
		.catch(err => {
			console.log(err);
		});
};
onMounted(() => {
	ProjectDetailsFn(store.id);	
});
onLoad(option => {
	Data.optionid = option.id;
	Data.pageid = option.pageid;
	console.log(Data.optionid);
});
</script>

<style lang="less" scoped>
.packageDetail {
	width: 688rpx;
	margin-left: 32rpx;
	margin-top: 24rpx;

	.title {
		width: 192rpx;
		height: 42rpx;
		font-weight: 500;
		font-style: normal;
		font-size: 15px;
		margin-top: 38rpx;
		margin-bottom: 25rpx;
	}
	.box {
		width: 686rpx;
		height: 208rpx;
		margin-bottom: 32rpx;
		background-color: #fff;
		border: 1rpx solid #f2f2f2;
		border-radius: 15rpx;
		margin-bottom: 50rpx;
		display: flex;
		justify-content: space-around;
		// .top {
		// 	display: flex;
		// 	justify-content: space-around;
		// 	font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		// 	font-weight: 200;
		// 	font-style: normal;
		// 	font-size: 24rpx;
		// 	color: #aaaaaa;
		// 	margin-top: 24rpx;
		// }
		// .bottom {
		// 	margin-top: 60rpx;

		// 	.btn::after {
		// 		border: none;
		// 	}
		// 	.btn-box {
		// 		display: flex;
		// 		justify-content: space-around;
		// 		align-items: center;
		// 	}
		// 	.btn {
		// 		border-radius: 40rpx;
		// 		background-color: #e5f0ff;
		// 		width: 80rpx;
		// 		height: 64rpx;
		// 		font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
		// 		font-weight: 500;
		// 		font-style: normal;
		// 		font-size: 28rpx;
		// 		color: rgba(51, 51, 51, 0.988235294117647);
		// 		line-height: 64rpx;
		// 		text-align: center;
		// 	}
		// }
		.week-day {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			width: 76rpx;
			padding: 40rpx 0;

			// height: 88rpx;
			text {
				font-size: 30rpx;
				color: #acacac;
			}

			.data {
				width: 74rpx;
				height: 86rpx;
				border-radius: 27rpx;
				background-color: #e6f1ff;
				color: #5b5d61;
				font-size: 34rpx;
				text-align: center;
				line-height: 74rpx;
			}

			.active {
				background-color: #006eff;
				color: #fff;
			}
		}
	}
	.list {
		width: 684rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 36rpx;
		border-bottom: 1px solid #f3f3f4;
		.left {
			margin-left: 15px;
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			font-weight: 400;
			font-style: normal;
			font-size: 28rpx;
			text-align: left;
			line-height: 80rpx;
		}
		.right {
			margin-right: 15px;
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			font-weight: 400;
			font-style: normal;
			font-size: 28rpx;
			color: #fe2a63;
			text-align: right;
			line-height: 80rpx;
		}
	}
	/deep/.uni-card {
		margin: 0 !important;
		width: 345px;
		padding: 0 !important;
		margin-right: 40px;
	}

	/deep/.uni-body text {
		display: flex;
		font-style: normal;
		font-size: 14px;
		text-align: left;
		line-height: 26px;
	}
	.end {
		width: 750rpx;
		height: 98rpx;
		background-color: #fff;
		border-top: 1px solid #f3f3f4;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		&-left {
			width: 345rpx;
			display: flex;
			padding: 0 30rpx;
			align-items: center;
			.end-flex {
				display: flex;
				align-items: center;
			}
		}
		&-right {
			width: 345rpx;
			line-height: 90rpx;
			background-color: #006eff;
			text-align: center;
			color: #fff;
		}
	}
}
</style>
